Islavisual.com - Listado Articulos sobre Cross Browsing

Responsive Design: SPIFFY HTML5 Site Templates

Hoy os voy a dar la oportunidad de conocer una web bastante interesante. No sólo porque sea de uso libre sino, también, por su calidad.

Responsive Design: Utilidades - Magnific Popup

Magnific Popup es un plugin de jQuery lightbox responsive y de libre uso que está enfocado a obtener la mejor mejor experiencia de usuario y rendimiento en cualquier dispositivo, al menos eso dicen. Las características más interesantes de este plugin se comentan a continuación:

SVG Filters: Filtros en SVG

Los filtros se beden declarar en la etiqueta defs. Para aplicar un filtro a un determinado elemento se establece la propiedad filter que contiene un conjunto de primitivas de filtro y realiza una sóla operación fundamental gráfica (por ejemplo, un desenfoque gaussiano o un efecto de iluminación) en una o más entradas, produciendo, así, una imagen. Debido a que gran parte de las primitivas de filtro representan alguna forma de procesamiento de imágenes, en la mayoría de los casos, la salida de filter dará como resultado una única imagen de mapa de bits RGBA. Sin embargo, se regenerara si se cambia a una resolución mayor.

Cuándo utilizar el elemento Defs de un gráfico SVG

Una etiqueta que verás contínuamente en SVG es defs. Es crucial que se entienda cuándo usar el elemento defs en SVG ya que es como una alerta que le indica al parser XML que está a punto de definir algo. Al igual que cualquier otra etiqueta XML, defs debe tener una etiqueta de apertura y cierre en el código. La etiqueta defs es un contenedor que contiene otros elementos. Cuando colocamos otras etiquetas dentro defs, se está creando un conjunto identificable que puede ser usado una vez o varias veces. La etiqueta defs permite, por tanto, establecer una definición que no se mostrará hasta que se requiera. Se podría pensar en defs como un modelo. Se crea un único esquema que se puede utilizar para construir otras estructuras múltiples.

Como hacer que la imagen de fondo se adapte al tamaño de la pantalla con CSS3

En CSS2.1, lás imágenes de fondo se aplicaban a un recipiente o DIV conservado sus dimensiones fijas. Afortunadamente, CSS3 introduce la propiedad background-size que permite que los fondos de pantalla sean estirados o distorsionados. Por defecto, la anchura y la altura del fondo o background se establece a auto que mantiene las dimensiones originales de la imagen.

Introduccion a los Gráficos Vectoriales Redimensionables (SVG)

Los Gráficos Vectoriales Redimensionables (del inglés Scalable Vector Graphics) o SVG es una especificación para describir gráficos vectoriales bidimensionales, tanto estáticos como animados (estos últimos con ayuda de SMIL), en formato XML. Dicho de otra manera más sencilla, SVG es un formato que permite definir gráficos definidos como texto basados en la especificación del lenguaje XML y su desarrollo está a cargo del consorcio W3C (World Wide Web Consortium).

Reflexión o efectos espejo en CSS3

Antes de CSS3, cuando queríamos hacer un efecto espejo o un reflejo teníamos que usar jQuery. Eso estaba bien ya que a los usuarios de internet les encantan los efectos visuales y, por norma general, la vistosidad. Ahora con CSS3, hacer esto es muy sencillo. El código que debajo os propongo está dentro de la normativa Cross Browsing, por lo que funciona en todos los navegadore. Hay que decir que en IE8 e inferiores el efecto no es maravilloso pero no queda mal del todo.

Transparencias en CSS3

Antes de CSS3, las transparencias sólo se podían hacer en Internet Explorer con la propiedad filter y en los demás con opacity. Esto era un poco caótico y encima funcionaba de aquella manera ya que tenía las limitaciones de aplicarse a todo el recipiente o contenedor. Ejemplo

Dibujar con box-shadow de CSS3

Hace tiempo, cuando empezó a nacer el CSS3, vi una imagen de la Mona Lisa y pensé que era un archivo JPEG, pero no. Era un estilo CSS3 y, como no podía ser de otra manera, me quedé sorprendido de la calidad de la imagen frente a mis ojos. Me puse a investigar y, al poco tiempo, vi que estaba realizado con box-shadow. Entoces me puse a pensar en las posibilidades que podía contemplar sólo con una propiedad CSS3.

Gradientes y degradados en CSS3

Los degradados y gradientes son uno de los recursos más utilizados por los diseñadores para hacer que las las webs sean más vistosas y la verdad es que dan mucho juego para mejorar el aspecto de la página. No obstante, hasta la llegada de CSS3, también tenían una desventaja importante, ya que para implementarlos necesitábamos usar imágenes de fondo para los elementos. A medida que ha ido avanzando y creciendo el CSS3, se ha mejorado el soporte y, entre otras cosas, también en el uso de degradados.

Consentimiento para cookies y datos